<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="css/verify.css">

    <title>Title</title>
    <style type="text/css">
             #choiceWindow {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 30%;
            height: 55%;
            padding: 20px;
            border: 3px solid #ccc;
            background-color: white;
            z-index:2;
            overflow: auto;
        }
        #backGround {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1100px;
            background-color: black;
            z-index:1;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=88);
        }
        #x:hover {cursor: pointer;color: rgb(55,198,192);}


    </style>
    <script type="text/javascript" src="../static/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

       $(document).ready(function() {
           $("#btn").click(function () {
               $("#choiceWindow").slideDown(300);
               $("#backGround").show();

           });
      $("#x").click(function(){
                $("#choiceWindow").slideUp(300);
                $("#backGround").hide();
            })

            });



    </script>
</head>
<body>


<div>这是一个主界面</div><br>

        <p id="btn">点击文字弹窗</p>
        <div id="choiceWindow">
            <label id="x" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label>

            <div style="text-align:center;clear:both;margin:50px 0">

            </div>
           <div id="mpanel4" style="margin-top:50px;">
            </div>
        </div>
        <div id="backGround"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
<script type="text/javascript">

       $('#mpanel4').slideVerify({
		type : 2,		//类型
		vOffset : 5,	//误差量，根据需求自行调整
		vSpace : 5,	//间隔
		imgName : ['1.jpg', '2.jpg'],
		imgSize : {
			width: '400px',
			height: '200px',
		},
		blockSize : {
			width: '40px',
			height: '40px',
		},
		barSize : {
			width : '400px',
			height : '40px',
		},
		ready : function() {
		},
		success : function() {
			alert('验证成功，添加你自己的代码！');
			//......后续操作
            window.history.back();
		},
		error : function() {
//		        	alert('验证失败！');
		}

	});


</script>

</body>
</html>